<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>D3Js</title>
</head>
<body>

<svg width="960" height="600"></svg>

<script src="https://d3js.org/d3.v5.min.js"></script>
<script type="text/javascript">
//    var marge = {top:60,bottom:60,left:60,right:60}//设置边距
//    var dataset = [ 250 , 210 , 170 , 130 , 90 ];  //数据（表示矩形的宽度）
//    var svg = d3.select("svg");//得到svg画布
//    var g = svg.append("g")//定义一个用来装整个图表的一个分组，并设置他的位置
//        .attr("transform","translate("+marge.top+","+marge.left+")");
//
//    var rectHeight = 40;//设置每一个矩形的高度
//
//    g.selectAll("rect")
//        .data(dataset)
//        .enter()
//        .append("rect")
//        .attr("x",20)//设置左上点的x
//        .attr("y",function(data,index){//设置左上点的y
//            console.log(data);
//            console.log(index);
//            return index*rectHeight;//(0*40)(1*40)(2*40)
//        })
//        .attr("width",function(d){//设置宽
//            return d;
//        })
//        .attr("height",rectHeight-10)//设置长
//        .attr("fill","blue");//颜色填充


var marge = {top:60,bottom:60,left:60,right:60}
var dataset = [ 25 , 21 , 17 , 13 , 9 ,20];

//定义一个线性比例尺
var scaleLinear = d3.scaleLinear()
    .domain([0,d3.max(dataset)])
    .range([0,300]);

var svg = d3.select("svg");
var g = svg.append("g")
    .attr("transform","translate("+marge.top+","+marge.left+")");

var rectHeight = 30;

g.selectAll("rect")
    .data(dataset)
    .enter()
    .append("rect")
    .attr("x",20)
    .attr("y",function(d,i){
        return i*rectHeight;
    })
    .attr("width",function(d){
        return scaleLinear(d);//设置宽,并在这里使用比例尺
    })
    .attr("height",rectHeight-5)
    .attr("fill","blue");



//为坐标轴定义一个线性比例尺
var xScale = d3.scaleLinear()
    .domain([0,d3.max(dataset)])
    .range([0,300]);
//定义一个坐标轴
var xAxis = d3.axisBottom(xScale)//定义一个axis，由bottom可知，是朝下的
   .ticks(6);//设置刻度数目


var yScale = d3.scaleLinear()
    .domain([0,d3.max(dataset)])
    .range([0,180]);
var yAxis = d3.axisLeft(yScale)
    .ticks(6);//设置刻度数目

g.append("g")
    .attr("transform","translate("+20+","+(dataset.length*rectHeight)+")")
    .call(xAxis)


g.append("g")
    .attr("transform","translate(0,0)")
    .call(yAxis);




</script>

</body>
</html>
